<template>
  <div>
    <navPage></navPage>

    <!-- #1. banner左边菜单，banner ，个人中心信息 -->
    <div id="banner-wrapper">
      <div class="w clearfix">
        <!-- banner左边菜单 -->
        <div id="aside" class="wrap" v-loading="classifyListLoading">
          <ul id="" class="aside_ul">
            <li
              class="aside_li"
              v-for="(item, index) in classifyList"
              :key="index"
            >
              <!-- @mouseover="overChildrenmenu(index)"
              @mouseout="outChildrenmenu(index)" -->

              <!-- 可选中父菜单 -->
              <div class="menu">
                <nuxt-link
                  :to="
                    '/farmProducts/?classifyId=' +
                    item.classifyId +
                    '&type=' +
                    item.flag +
                    '&classifyIndex=' +
                    item.classifyIndex
                  "
                  >{{ item.name }}</nuxt-link
                >
              </div>

              <!-- 点击跳转的子菜单 -->

              <!-- <div v-show="showChildrenMenu === index"> -->
              <div style="display:inline-block;*display:inline;*zoom:1;"
                v-for="(second, secondIndex) in item.childrens"
                :key="secondIndex"
              >
                <nuxt-link
                  :to="
                    '/farmProducts/?classifyId=' +
                    second.classifyId +
                    '&type=' +
                    second.flag +
                    '&classifyIndex=' +
                    item.classifyIndex +
                    '&classifyChildIndex=' +
                    secondIndex
                  "
                  >{{ second.name }}</nuxt-link
                >
              </div>
              <!-- </div> -->
            </li>
          </ul>
        </div>

        <!-- 个人中心信息 -->
        <div class="login_box">
          <div class="box_top">
            <div style="position: relative">
              <img src="../../assets/img/head_portrait.png" alt="" />
              <div class="login-status">
                <p class="ueser_box" title="" v-if="!isLogin">您还未登录</p>
                <p class="ueser_box" title="" v-if="!isLogin">请一键登录</p>
                <p
                  class="ueser_box"
                  title=""
                  v-if="isLogin"
                  style="margin-top: 10px"
                >
                  {{ user }}
                </p>
              </div>
            </div>

            <div class="alread-login" v-if="isLogin">
              <ul class="clearfix">
                <li>
                  <p class="number">0</p>
                  <p>待付款</p>
                </li>
                <li>
                  <p class="number">0</p>
                  <p>待发货</p>
                </li>
                <li>
                  <p class="number">0</p>
                  <p>待收货</p>
                </li>
              </ul>
              <div class="loginout" @click="loginOut">退出登录</div>
            </div>
            <div class="no-login" v-else>
              <nuxt-link to="/login" class="login_once">立即登录</nuxt-link>

              <nuxt-link to="/register" class="registered">免费注册</nuxt-link>
            </div>
          </div>
          <div class="box_bottom clearfix">
            <nuxt-link to="/forgetPwd" class="fl">忘记密码</nuxt-link>
            <nuxt-link
              to="/authentication"
              class="fr"
              v-if="isLogin && userType == 'CORP'"
              >实名认证</nuxt-link
            >
            <nuxt-link
              to="/personAuth"
              class="fr"
              v-if="isLogin && userType == 'PERSON'"
              >实名认证</nuxt-link
            >
          </div>
        </div>

        <!-- banner图 -->
        <div id="banner" v-loading="bannerListLoading">
          <el-carousel trigger="click" height="357px" :autoplay="true">
            <el-carousel-item v-for="item in bannerList" :key="item.id">
              <img :src="item.imgUrl" />
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>

    <!-- #2.  banner 下面的4个专区图片 -->
    <div
      class="zone_box w clearfix"
      v-loading="imgZoneListLoading"
      style="min-height: 129px"
    >
      <div v-for="(item, index) in imgZoneList" :key="index">
        <el-row :gutter="12" style="margin-top: 10px; margin-bottom: 10px">
          <!-- <el-col :span="6">
            <img
              style="width: 290px; height: 127px"
              src="../../assets/img/z1.png"
              alt="农产品专区"
              @click="goPage('/farmProducts?type=NCP')"
            />
          </el-col>

          <el-col :span="6">
            <img
              style="width: 290px; height: 127px"
              src="../../assets/img/z2.png"
              alt="农资专区"
              @click="goPage('/farmProducts?type=NZ')"
            />
          </el-col>

          <el-col :span="6">
            <img
              style="width: 290px; height: 127px"
              src="../../assets/img/z3.png"
              alt="产权专区"
              @click="goPage('/property')"
            />
          </el-col>

          <el-col :span="6">
            <img
              style="width: 290px; height: 127px"
              src="../../assets/img/z4.png"
              alt="共享农田专区"
              @click="goPage('/shareCropland')"
            />
          </el-col>
        </el-row> -->

          <div v-for="(sunItem, sunIndex) in item" :key="sunIndex">
            <el-col :span="6">
              <img
                style="width: 290px; height: 127px; cursor: pointer;"
                :src="
                  baseUrl +
                  '/sys/file/showpic?id=' +
                  spimgurl(item[sunIndex].pictureUrl)
                "
                :alt="item[sunIndex].title"
                @click="goPage(item[sunIndex].type)"
              />
            </el-col>
          </div>
        </el-row>
      </div>
    </div>

    <!-- #3. 产品展示 -->
    <div id="hot-sell" class="w">
      <div class="cleartop">
        <div class="box_header">标准化产品展示</div>
        <div class="sk_list_wrapper clearfix" v-loading="productListLoading">
          <div v-if="productList != null && productList.length > 0">
            <div
              class="sk_item floating"
              v-for="(item, index) in productList"
              :key="index"
            >
              <a
                :href="'/farmProducts/detail?materialId=' + item.materialId"
                :title="item.materialName"
              >
                <img
                  :src="
                    baseUrl + '/sys/file/showpic?id=' + spimgurl(item.iconUrl)
                  "
                  :title="item.materialName"
                />
              </a>
              <p class="goods-name txtof2">{{ item.materialName }}</p>
              <div class="info">
                <div class="price">
                  <span class="new">单位：{{ item.unit }}</span>
                  <img
                    class="cart"
                    src="../../assets/img/cart.png"
                    alt=""
                    @click="joinCar(item.materialId)"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            v-else
            style="background: #ffffff; height: 388px; text-align: center"
          >
            <div v-if="!productListLoading">
              <img
                src="../../assets/img/noData.png"
                style="margin-top: 80px; margin-bottom: 20px"
              />
              <p style="font-size: 14px; color: #666">暂无展示商品</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <FooterPage></FooterPage>
    <div class="sideBar">
      <div>
        <div class="tips">在线客服</div>
        <ul class="list">
            <li>QQ:1605821757</li>
            <li>QQ:1640261872</li>
            <li>QQ:1605821757</li>
            <li>QQ:1640261872</li>
            <li>QQ:1605821757</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import FooterPage from "../../components/footer";
import navPage from "../../components/nav";
import { mapMutations } from "vuex";
import Cookie from "js-cookie";
export default {
  components: {
    FooterPage,
    navPage,
  },
  data() {
    return {
      showChildrenMenu: -1, //分类菜单
      isActive: 0,
      isLogin: Cookie.get("token"),
      user: Cookie.get("user"),
      userType: Cookie.get("userType"),
      bannerList: [],
      bannerListLoading: false,
      classifyList: [],
      classifyListLoading: false,
      imgZoneList: [],
      imgZoneListLoading: false,
      productList: [],
      productListLoading: true,
    };
  },

  //（创建，【安装，更新】，销毁）
  beforeMount() {
  },

  mounted() {
    this.getGoodsClassification();
    this.getproductList();

    this.getBanner();
    this.getShopCar();
    this.getHomeImgZone();
  },

  methods: {
    overChildrenmenu(index) {
      this.showChildrenMenu = index;
    },
    outChildrenmenu() {
      this.showChildrenMenu = -1;
    },
    goPage(path) {
      if (path != null && path !== "") {
        window.open(path, "_blank");
      } else {
        this.$message.error("跳转路径没有设置，请在后台进行设置");
      }
    },
    loginOut() {
      Cookie.remove("token");
      Cookie.remove("roleId");
      this.$store.commit("changeLoginStatus", false);
      this.isLogin = false;
      this.$message({
        type: "success",
        message: "退出成功",
      });
      this.$store.commit("joinCar");
    },
    //处理图片分隔
    spimgurl(value) {
      if (value != null) {
        let ff = value.split(",");
        if (ff != null && ff.length > 0) {
          const element = ff[0];
          var elmentList = element.split(":");
          return elmentList[0];
        }
      }
      return "";
    },
    // 加入购物车
    joinCar(id) {
      if (this.isLogin) {
        this.$http(
          "post",
          "/sys/iaShoppingTrolley/add.do",
          { materialId: id, num: 1 },
          "json"
        ).then((res) => {
          if (res.code == "0000") {
            this.$message({
              type: "success",
              message: "加入成功",
            });
            this.$store.commit("joinCar", 1);
          }
        });
      } else {
        this.$router.push("/login");
      }
    },
    // 获取 banner
    getBanner() {
      this.bannerListLoading = true;
      this.$http("post", "/sys/banner/qryAllBanner.do").then((res) => {
        if (res.code == "0000") {
          this.bannerList = res.result;
          this.bannerListLoading = false;
        }
      });
    },
    getShopCar() {
      if (Cookie.get("token") && Cookie.get("token") !== "") {
        this.$store.commit("joinCar");
      }
    },
    //获取商品分类
    getGoodsClassification() {
      this.classifyListLoading = true;
      var classifyZhList = [];
      var nCPList = [];
      var classifyNCPList = [];

      var nZList = [];
      var classifyNZList = [];

      this.$http(
        "get",
        "/sys/iaCommodityClassify/getOfficalCommodityClassifyTree.do",
        {
          plate: "CORPS", //(CORPS: 农产品; APRODUCT: 农资产品)
        }
      ).then((res) => {
        if (res.code == "0000") {
          console.log("农商品分类数据：", res);
          nCPList = res.result;

          var classifyIndexNCP = 0;
          nCPList.forEach((element) => {
            element.flag = "NCP";

            element.classifyIndex = classifyIndexNCP;
            classifyIndexNCP = classifyIndexNCP + 1;

            if (element.childrens != null) {
              element.childrens.forEach((item) => {
                item.flag = "NCP";
              });
            }

            classifyNCPList.push(element);
          });

          this.$http(
            "get",
            "/sys/iaCommodityClassify/getOfficalCommodityClassifyTree.do",
            {
              plate: "APRODUCT", //(CORPS: 农产品; APRODUCT: 农资产品)
            }
          ).then((nzres) => {
            if (res.code == "0000") {
              console.log("农资产品分类数据：", nzres);

              nZList = nzres.result;
              if (nZList != null && nZList.length > 0) {
                var classifyIndexNZ = 0;
                nZList.forEach((element) => {
                  element.flag = "NZ";
                  element.classifyIndex = classifyIndexNZ;
                  classifyIndexNZ = classifyIndexNZ + 1;

                  if (element.childrens != null) {
                    element.childrens.forEach((item) => {
                      item.flag = "NZ";
                    });
                  }
                  classifyNZList.push(element);
                });
              }
              classifyZhList = classifyNCPList.concat(classifyNZList);

              this.classifyList = classifyZhList;
              console.log("融合的产品分类数据：", classifyZhList);
              this.classifyListLoading = false;
            }
          });
        }
      });
    },

    //获取图片专区
    getHomeImgZone() {
      this.imgZoneListLoading = true;
      this.$http("get", "/sys/iaHomepage/getOfficalPage.do", {
        pageNum: 1,
        pageSize: 10000,
      }).then((res) => {
        if (res.code == "0000") {
          console.log("图片专区数据：", res);
          var imgList = res.result.rows;
          this.imgZoneList = [];
          for (let index = 0; index < imgList.length; index += 4) {
            this.imgZoneList.push(imgList.slice(index, index + 4));
          }

          console.log("图片专区拆分的数据：", this.imgZoneList);

          this.imgZoneListLoading = false;
        }
      });
    },
    //获取标准化产品
    getproductList() {
      this.productListLoading = true;
      this.$http("get", "/sys/iaMaterialCorps/getOfficialPage.do", {
        plate: "CORPS", //(CORPS: 农产品; APRODUCT: 农资产品)
        pageNum: 1,
        pageSize: 6,
      }).then((res) => {
        if (res.code == "0000") {
          console.log("标准化", res);
          this.productList = res.result.rows;
          this.productListLoading = false;
        }
      });
    },
  },
};
</script>
<style scoped>
@import url("../../assets/css/index.css");
</style>
<style scoped>
.leftNavActive {
  color: #ee781b !important;
}
.no-login {
  margin-top: 70px;
}
.alread-login {
  border-top: 1px solid #e8e8e8;
}
.alread-login ul {
  margin: 26px 10px;
}
.alread-login ul li {
  float: left;
  text-align: center;
  width: 60px;
  font-size: 14px;
}
.alread-login ul li p:nth-child(1) {
  color: #ee781b;
}
.alread-login ul li p:nth-child(2) {
  font-size: 14px;
  color: #606266;
  margin-top: 5px;
}
.loginout {
  width: 168px;
  height: 38px;
  line-height: 38px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #ee781b;
  text-align: center;
  font-size: 14px;
  color: #ee781b;
  margin-top: 58px;
  margin-bottom: 10px;
  margin-left: 16px;
  cursor: pointer;
}
.loginout:hover {
  background: #ee781b;
  color: #fff;
}
.box_bottom a {
  line-height: 40px;
  font-size: 14px;
  width: 92px;
  color: #6e6e6e;
}
.box_bottom a:nth-child(1) {
  text-align: left;
}
.box_bottom a:nth-child(2) {
  text-align: right;
}
.box_bottom a:hover {
  color: #ee781b;
}
</style>
<style>
.el-carousel__item {
  height: 357px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 420px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
<style scoped>
.sideBar {
	position:fixed;
	right:-182px;
	top:50px;
	background-color:#ffffff;
	border:#eea236 solid 1px;
	transition:right 0.5s;
	border:solid 1px #eea236;
}
.sideBar:hover {
	right:0;
}
.sideBar>div {
	position:relative;
}
.sideBar .tips {
	position:absolute;
	height:120px;
	line-height:25px;
	background-color:#eea236;
	width:40px;
	left:-40px;
	top:50px;
	text-align:center;
	box-sizing:border-box;
	padding:10px 10px;
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
	font-weight:bold;
	color:#ffffff;
}
.sideBar .list {
	padding:0;
	list-style:none;
	width:180px;
	margin:0;
}
.sideBar .list>li {
	padding:15px;
	border-top:#eea236 dashed 1px;
}
.sideBar .list>li:hover {
	background-color:#f0ad4e;
	color:#ffffff;
}
.sideBar .list>li:first-child {
	border-top:none;
}
</style>
